<template>
  <div class="">
    <!-- 搜索 -->
    <SearchBlock ref="searchBlockRef" @clickQuery="clickQuery" :storeList="storeList" @clickAdd="clickAdd">
    </SearchBlock>

    <hz-table ref="tableRef" :tableConfig="tableConfig" @pageChange="clickQuery" :columnSelection='false'>
      <template #state_label="{ column, record, text, index }">
        <el-button type="primary" size="small" plain @click="clickChangeState(record)" v-if="record.state == 'yes'">{{
          record.state_label }}</el-button>
        <el-button type="warning" size="small" plain @click="clickChangeState(record)" v-else>{{ record.state_label
        }}</el-button>
      </template>
      <template #action="{ column, record, text, index }">
        <!-- <el-button type="success" size="small" link @click="clickAdd(record)">新增菜品</el-button> -->
        <el-button type="primary" size="small" link @click="clickEdit(record)">编辑</el-button>
        <el-button type="primary" size="small" link @click="clickEdit(record, true)">复制</el-button>
        <el-button type="danger" size="small" link @click="clickDel(record)">删除</el-button>
      </template>
    </hz-table>
    
    <!-- 新增、编辑 -->
    <!-- <hz-dialog v-model="dialogConfig.show" :title="dialogConfig.title" >
      <add-edit :formConfig="formConfig" @successCallback="clickQuery" :storeList="storeList"></add-edit>
    </hz-dialog> -->

  </div>
</template>
<script setup>
import { ref, onMounted, reactive, watchEffect, getCurrentInstance } from "vue";
import SearchBlock from "../common/searchBlock.vue";
// import AddEdit from "./fdAddEdit.vue";
import { foodState } from '@/plugin/dict'
import { ElMessage, ElMessageBox } from "element-plus";

const { proxy } = getCurrentInstance();
const searchBlockRef = ref(null);
const tableRef = ref(null);
// 表格数据
const tableConfig = reactive({
  columns: [
    { label: "菜品", prop: "foodName", 'width': 250, showTooltip: false},
    { label: "状态", prop: "state_label", 'width': 80, scopeVal: true, },
    { label: "店铺", prop: "storeName", 'width': 230 },
    { label: "合作价", prop: "storePrice", 'width': 80, },
    { label: "限购", prop: "limitCount", 'width': 100 },
    { label: "分类", prop: "foodTypeName", 'width': 200 },
    { label: "描述", prop: "description", 'min-width': 100 },
    // { label: "图片", prop: "foodImage", 'min-width': 200 },
    // { label: "规格", prop: "specification", 'width': 500, showTooltip: false},
    { label: "操作", prop: "action", 'width': 150, scopeVal: true, fixed: 'right' },
  ],
  dataSource: [],
  pageSize: 10,
  pageNo: 1,
  total: 0,
});

const storeList = ref([])

// 弹窗编辑数据
const dialogConfig = reactive({
  show: false,
  title: '',
})
const formConfig = reactive({
  dataObj: {},
  type: 'add',
  dialog: dialogConfig,
  okCallback: submitCallback,
  noCallback: () => { },
})

getAllStores();
onMounted(() => {
  clickQuery();
})

/* ---------methods--------- */

// 获取店铺下拉数据
function getAllStores() {
  let param = { pageSize: 100000, pageNo: 1};
  proxy.$http.get('/jx/jxStoreManage/queryAllStores', { params: param}).then(res => {
    if (res.code == 200) {
      storeList.value = res.result.stores || []
    } 
  })
}

// 点击查询
function clickQuery(data) {
  if (!data) {
    searchBlockRef.value.clickQuery();
    return;
  }
  console.log('data--', data);
  return;
  
  let { pageSize, pageNo } = tableConfig
  let param = {pageSize, pageNo };
  let url = '';
  if (data.storeId) {
    param.storeId = data.storeId
    url = '/jx/jxFoodManage/queryFoodsByStoreId';
  } else {
    param.keyword = data.keyword
    url = '/jx/jxFoodManage/queryFoodsByKeyword';
  }

  proxy.$http.get(url, { params: param, }).then(res => {
    if (res.code == 200) {
      tableConfig.dataSource = Array.isArray(res.result.foods) ? res.result.foods : [];
      tableConfig.total = res.result.totalCount
      handleTableDataSource();
    } else {
      tableConfig.dataSource = [];
      tableConfig.total = 0;
    }
  })
}

// 处理表格数据
function handleTableDataSource() {
  tableConfig.dataSource.forEach(val => {
    val.state_label = foodState[val.state]
  })
}

// 点击新增按钮
function clickAdd() {
  dialogConfig.show = true;
  dialogConfig.title = '新增菜品';
  formConfig.type = 'add';
  formConfig.dataObj = {
    foodName: '',
    description: '',
    storePrice: '',
    storeName: '',
    storeId: '',
    // storeName: record.storeName,
    // storeId: record.storeId,
    foodTypeName: '',
    state: '',
    sort: 1,
    foodImage: '',
    required: false,
    specification: [],
  }
}


// 点击编辑按钮
function clickEdit(record, isCopy) {
  dialogConfig.show = true;
  dialogConfig.title = '编辑菜品';
  formConfig.type = 'edit';

  proxy.$http.get('/jx/jxFoodManage/queryFoodById', { params: {foodId: record.foodId}, successTip: false}).then(res => {
    if (res.code == 200) {
      console.log(res);
    } 
  })

  formConfig.dataObj = JSON.parse(JSON.stringify(record));
  if (isCopy) {
    dialogConfig.title = '新增菜品-复制';
    formConfig.type = 'add';
    delete formConfig.dataObj.foodId
  }
}

// 点击切换上下架
function clickChangeState(record) {
  let msg = `确定将【${record.foodName}】设为`
  let newState;
  if (record.state == 'yes') {
    msg = msg + '【下架】？'
    newState = 'no'
  } else {
    msg = msg + '【上架】？'
    newState = 'yes'
  }
  let funParam = {newState, obj: record}
  proxy.$util.confirmBox({ msg, okFun: submitChangeState, funParam})

}

// 执行切换上下架
function submitChangeState(funParam = {}) {
  let { storeId, foodId } = funParam.obj;
  let param = { storeId, foodId, newState: funParam.newState };
  let url = '/jx/jxFoodManage/changeFoodSupplyState' + proxy.$util.objToStrParams(param)
  proxy.$http.put(url, param, { successTip: true }).then(res => {
    if (res.code == 200) {
      clickQuery();
    }
  })
}

// 点击删除按钮
function clickDel(record) {
  let msg = `确定删除菜品【${record.foodName}】？`
  proxy.$util.confirmBox({ msg, okFun: submitDelele, funParam: record.foodId})
}

// 执行删除
function submitDelele(foodId = '') {
  let url = `/jx/jxFoodManage/deleteFood?foodId=${foodId}`
  proxy.$http.delete(url, { successTip: true }).then(res => {
    if (res.code == 200) {
      clickQuery();
    }
  })
}

// 新增、编辑成功后的回调
function submitCallback() {
  clickQuery();
}

</script>
<style lang="scss" scoped>
.is-plain.el-button {
  padding: 4px 8px !important;
}
</style>
